<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>v-for:内容比较长、长度不固定的列表</p>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item,index) in cart" :key="index">{{item.name}},￥{{item.price.toFixed(2)}}元</li>
    </ul>
    <hr>
    <!-- key是唯一的值，作用是更加高效的更新dom节点 -->
    <div v-for="(item, index) in kongFu" :key="index">
      {{index+1}}. {{item}}
    </div>
    <hr>
    <!-- 遍历对象 -->
    <div v-for="(val, key, index) in obj" :key="val">
      {{index+1}}. {{key}}: {{val}}
    </div>
    <!-- 遍历整数 -->
    <button v-for="num in 5" :key="num+'btn'">{{num}}</button>
    <!-- 遍历字符串 -->
    <button v-for="(item,index) in str" :key="index+item">{{item}}</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        cart: [
          {name: 'apple', price: 4},
          {name: 'banana', price: 3},
          {name: 'pear', price: 3.5},
          {name: 'patch', price: 5}
        ],
        kongFu: ['接化发', '大意了没有闪', '耗子尾汁', '偷袭', '有备而来'],
        obj: {
          name: 'Tony',
          age: 20,
          job: 'hair',
          sex: '男'
        },
        str: 'hello'
      }
    })
  </script>
</body>
</html>